<template>
    <div style="height: 100vh;">
        <el-card style="height: 100%;">
            <div style="display: flex;height: 100%;align-items: center;">
                <div style="width: 100%;justify-content: center;height: 100%;align-items: center;">
                    <!-- <div style="display: flex;align-items: center;margin-left: 30px;">
                        <div>
                            <el-button @click="getDate()">今日</el-button>
                        </div>
                        <div style="width: 16%;margin-left: 20px;">
                            <div style="display: flex;justify-content: space-between;align-items: center;">
                                <div><el-button style="padding-left: 10px;padding-right: 10px;" @click="dayMinus"><i class="el-icon-arrow-left"></i></el-button></div>
                                <div style="min-width: 120px;">{{ calendarYear }}年{{ calendarMonth }}月{{ calendarDay }}日</div>
                                <div><el-button style="padding-left: 10px;padding-right: 10px;" @click="dayAdd"><i class="el-icon-arrow-right"></i></el-button></div>
                            </div>
                        </div>
                    </div> -->
                    <div style="display: flex;border-top: 1px solid #e7ebef;margin-top: 20px;justify-content: center;min-height: 830px;">
                        <div style="width: 80px;border-right:  1px solid #e7ebef;min-height: 830px;">
                            <div style="text-align: right;height: 50px;line-height: 50px;border-bottom: 1px solid #e7ebef;"><div style="padding-right: 10px;">时间</div></div>
                            <div class="l">8AM</div>
                            <div class="l">9AM</div>
                            <div class="l">10AM</div>
                            <div class="l">11AM</div>
                            <div class="l">12PM</div>
                            <div class="l">1PM</div>
                            <div class="l">2PM</div>
                            <div class="l">3PM</div>
                            <div class="l">4PM</div>
                            <div class="l">5PM</div>
                            <div class="l">6PM</div>
                            <div class="l">7PM</div>
                            <div class="l">8PM</div>
                        </div>
                        <div style="width: 1200px;min-height: 830px;">
                            <div style="text-align: center;height: 50px;line-height: 50px;border-bottom: 1px solid #e7ebef;position: relative;">课程名称</div>
                            <div class="tableBox" :style="{ 'margin-top': item.distanceTime + 30 + 'px' }" v-for="(item,index) in tableList" @click="toDetail(item)">
                                <div class="tableCard" :style="{ height: item.totalTime + 'px','background-color':item.subjectColor }">
                                    <div class="cardTitle" :style="{ 'background-color':item.titleColor }">
                                        {{item.courseTitle}}
                                    </div>
                                    <div style="display: flex;justify-content: center;align-items: center;flex: 1;font-size: 14px;">
                                        {{item.courseName}}
                                    </div>
                                    <div style="font-size: 12px;text-align: center;margin-bottom: 15px;height: 10px;">
                                        查看详情
                                    </div>
                                </div>
                            </div>
                            <div v-for="(item,index) in 13">
                                <div style="height: 30px;border-bottom: 1px solid #e7ebef;border-right: 1px solid #e7ebef;display: flex;">
                                    <div class="r"></div>
                                    <div class="r"></div>
                                    <div class="r"></div>
                                    <div class="r"></div>
                                    <div class="r"></div>
                                    <div class="r"></div>
                                </div>
                                <div style="height: 30px;border-bottom: 1px dashed #e7ebef;border-right: 1px solid #e7ebef;display: flex;">
                                    <div class="r"></div>
                                    <div class="r"></div>
                                    <div class="r"></div>
                                    <div class="r"></div>
                                    <div class="r"></div>
                                    <div class="r"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </el-card>
        <!-- 添加或修改课对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="老师" prop="teacherId">
          <el-select v-model="form.teacherId"  style="width: 380px;" placeholder="请选择老师" :popper-append-to-body="false">
            <el-option
              v-for="item in teacherList"
              :key="item.id"
              :label="item.teacherName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程" prop="courseId">
          <el-select v-model="form.courseId" style="width: 380px;" placeholder="请选择课程" :popper-append-to-body="false">
            <el-option
              v-for="item in courseList"
              :key="item.id"
              :label="item.courseName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课表时间" prop="signDate">
          <el-date-picker clearable
            v-model="form.signDate" style="width: 380px;"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择课表时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="课表开始时间" prop="courseStartTime">
          <el-select v-model="form.courseStartTime"  style="width: 380px;" @change="startChanged" placeholder="请选择课表开始时间" :popper-append-to-body="false">
            <el-option
              v-for="item in timeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="课表结束时间" prop="courseEndTime">
          <el-select v-model="form.courseEndTime"  style="width: 380px;" @change="endChanged" placeholder="请选择课表结束时间" :popper-append-to-body="false">
            <el-option
              v-for="item in timeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程介绍" prop="courseBrief">
          <el-input  type="textarea" v-model="form.courseBrief" placeholder="请输入课程介绍" autosize/>
        </el-form-item>
        <el-form-item label="标题颜色" prop="titleColor">
          <el-color-picker v-model="form.titleColor"></el-color-picker>
          <!-- <el-input  type="text" v-model="form.titleColor" placeholder="请输入标题颜色" autosize/> -->
        </el-form-item>
        <el-form-item label="主题颜色" prop="subjectColor">
          <el-color-picker v-model="form.subjectColor"></el-color-picker>
          <!-- <el-input  type="text" v-model="form.subjectColor" placeholder="请输入主题颜色" autosize/> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="detail" width="500px" append-to-body>
        <div>
            <div style="display: flex;align-items: center;">
                <div style="color: #a2a6b5;">
                    课程名称：
                </div>
                <div style="border-bottom: 1px solid #f2f3fb;padding: 5px;flex: 1;">
                    {{ detailMsg.courseName }}
                </div>
            </div>
            <div style="display: flex;align-items: center;margin-top: 20px;">
                <div style="color: #a2a6b5;">
                    课程老师：
                </div>
                <div style="border-bottom: 1px solid #f2f3fb;padding: 5px;flex: 1;">
                    {{ detailMsg.teacherName }}
                </div>
            </div>
            <div style="display: flex;align-items: center;margin-top: 20px;">
                <div style="color: #a2a6b5;">
                    课程时间：
                </div>
                <div style="border-bottom: 1px solid #f2f3fb;padding: 5px;flex: 1;">
                    {{ detailMsg.courseTableTime }}
                </div>
            </div>
            <div style="display: flex;align-items: center;margin-top: 20px;">
                <div style="color: #a2a6b5;">
                    课程描述：
                </div>
                <div style="border: 1px solid #f2f3fb;padding: 10px;flex: 1;">
                    {{ detailMsg.courseBrief }}
                </div>
            </div>
        </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
  import { getTableInfo,courseTableList  } from "@/api/system/table";
  export default {
    name: "Login",
    data() {
      return {
        detailMsg:{},
        tableList: [
            // {
            //     id: 1, 
            //     courseTitle: "上午08:00-10:00", 
            //     courseName: "语文课", 
            //     courseStartTime: "08:00", 
            //     courseStartEnd: "10:00",
            //     mintime:120,
            //     topl:0
            // },
            // {
            //     id: 2, 
            //     courseTitle: "上午11:00-12:00", 
            //     courseName: "数学课", 
            //     courseStartTime: "11:00", 
            //     courseStartEnd: "12:00",
            //     mintime:60,
            //     topl:180
            // }
        ],
        seleDays:'',
        calendarYear:'',
        calendarMonth:'',
        calendarDay:'',
        weekList:['周一','周二','周三','周四','周五','周六','周日'],
        monlength:'',
        lastmonlength:'',
        firstDayOfMonth:'',
        firstDayOfWeek:'',
        queryParams: {
            courseTime:''
        },
        // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 课表格数据
      tableList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      detail:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        teacherId: null,
        courseId: null,
        signDate: null,
        courseStartTime: null,
        courseEndTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        courseId : [
          { required: true, message: '请选择课程信息', trigger: 'blur' }
        ],teacherId  : [
          { required: true, message: '请选择老师信息', trigger: 'blur' }
        ],
        signDate  : [
          { required: true, message: '请选择课表时间', trigger: 'blur' }
        ],
        courseStartTime : [
          { required: true, message: '课表开始时间', trigger: 'blur' }
        ],
        courseEndTime : [
          { required: true, message: '课表结束时间', trigger: 'blur' }
        ]
      },
      //课程名称
      courseList:[],
      //课程名称
      teacherList:[],
      timeList:[{id: 8,name: '08:00'},{id: 9,name: '09:00'},{id: 10,name: '10:00'},
        {id: 11,name: '11:00'},{id: 12,name: '12:00'},{id: 13,name: '13:00'},{id: 14,name: '14:00'},{id: 15,name: '15:00'},
        {id: 16,name: '16:00'},{id: 17,name: '17:00'},{id: 18,name: '18:00'},{id: 19,name: '19:00'},{id: 20,name: '20:00'}]
      };
    },
    watch: {

    },
    created() {
        // this.getDate()
        console.log(this.$route.query.date)
        this.queryParams.courseTime = this.$route.query.date

        this.getCourseTableList()
    },
    methods: {
        //开始时间
        startChanged(value){
          var startTime = this.timeList.find((item) => {return value ===  item.id})
          var endTime = this.timeList.find((item) => {return this.form.courseEndTime ===  item.id})
          if(null != startTime && null != endTime){
            if(startTime.name >= endTime.name){
              this.$modal.msgError("选择的课程开始时间必须小于课程结束时间");
            }
          }
        },
        //结束时间
        endChanged(value){
          var startTime = this.timeList.find((item) => {return this.form.courseStartTime ===  item.id})
          var endTime = this.timeList.find((item) => {return  value ===  item.id})
          if(startTime.name >= endTime.name){
            this.$modal.msgError("选择的课程结束时间必须大于课程开始时间");
          }
        },
        handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加课";
        },
        reset() {
          this.form = {
            id: null,
            teacherId: null,
            teacherName: null,
            courseId: null,
            courseName: null,
            courseBrief: null,
            signDate: null,
            courseStartTime: null,
            courseEndTime: null,
            courseIconUrl: null,
            courseIconName: null,
            titleColor:null,
            subjectColor:null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            startId:null,
            endId:null
          };
          this.resetForm("form");
        },
        /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加课";
    },
    toDetail(item){
        console.log(item)
        this.getTableInfo(item.id)
        
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getTable(id).then(response => {
        this.form = response.data;
        this.$set(this.form, "courseStartTime", response.startId);
        this.$set(this.form, "courseEndTime", response.endId);
        this.open = true;
        this.title = "修改课";
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            var course = this.courseList.find((item) => {return this.form.courseId ===  item.id})
            var teacher = this.teacherList.find((item) => {return this.form.teacherId ===  item.id})
            this.form.courseName = course.courseName;
            this.form.teacherName = teacher.teacherName;

            var startTime = this.timeList.find((item) => {return this.form.courseStartTime ===  item.name})
            var endTime = this.timeList.find((item) => {return this.form.courseEndTime === item.name})
            if(null == startTime || undefined == startTime){
              startTime = this.timeList.find((item) => {return this.form.courseStartTime ===  item.id})
            }
            if(null == endTime || undefined == endTime){
              startTime = this.timeList.find((item) => {return this.form.courseEndTime === item.id})
            }

            if(startTime.name >= endTime.name){
              this.$modal.msgError("选择的课程开始时间必须小于课程结束时间");
              return;
            }
            this.form.courseStartTime = startTime.name;
            this.form.courseEndTime = endTime.name;
            updateTable(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            var course = this.courseList.find((item) => {return this.form.courseId ===  item.id})
            var teacher = this.teacherList.find((item) => {return this.form.teacherId ===  item.id})
            this.form.courseName = course.courseName;
            this.form.teacherName = teacher.teacherName;

            var startTime = this.timeList.find((item) => {return this.form.courseStartTime ===  item.id})
            var endTime = this.timeList.find((item) => {return this.form.courseEndTime === item.id})

            if(startTime.name >= endTime.name){
              this.$modal.msgError("选择的课程开始时间必须小于课程结束时间");
              return;
            }
            this.form.courseStartTime = startTime.name;
            this.form.courseEndTime = endTime.name;
            addTable(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
        seleDay(item){
            console.log(item)
            this.seleDays = item
            this.calendarDay = item
            this.queryParams.courseTime = this.calendarYear+'-'+this.calendarMonth+'-'+item
            this.getCourseTableList()
        },
        getTableInfo(id){
            this.loading = true;
            var form = {}
            form.id = id
            getTableInfo(form).then(response => {
                console.log(response)
                if(response.code==200){
                    this.detailMsg = response.data
                    this.detail = true;
                    this.title = "课程详情";
                }
                // this.detail = true;
                // this.title = "课程详情";

                // this.tableList = response.data.tableList
            });
        },
        getCourseTableList(){
            this.loading = true;
            courseTableList(this.queryParams).then(response => {
                this.tableList = response.data.tableList
            });
        },
        getDate(){
            let currentDate = new Date();
            let year = currentDate.getFullYear(); // 获取当前年份
            let month = currentDate.getMonth() + 1; // 获取当前月份，注意月份从0开始，所以要加1
            let day = currentDate.getDate(); // 获取当前日期
            this.calendarYear = year
            this.calendarMonth = month
            this.seleDays = day
            this.calendarDay = day
            let toDay = year+'-'+month+'-'+day
            this.queryParams.courseTime = toDay
            this.creatCalendarDate()
            this.getCourseTableList()
        },
        creatCalendarDate(){
            this.monlength = new Date(this.calendarYear, this.calendarMonth, 0).getDate()
            this.lastmonlength = new Date(this.calendarYear, this.calendarMonth-1, 0).getDate() //获取上月有多少天
            this.firstDayOfMonth = new Date(this.calendarYear, this.calendarMonth-1, 1);   // 获取当月第一天的日期
            this.firstDayOfWeek = this.firstDayOfMonth.getDay();   // 获取当月第一天是星期几，星期天返回0，星期一返回1，依次类推
            if(this.firstDayOfWeek==0){
                this.firstDayOfWeek = 7
            }
        },
        monMinus(){
            this.calendarMonth--
            this.creatCalendarDate()
        },
        monAdd(){
            this.calendarMonth++
            this.creatCalendarDate()
        },
        dayMinus(){
            // this.calendarMonth--
            // this.creatCalendarDate()
        },
        dayAdd(){
            // this.calendarMonth++
            // this.creatCalendarDate()
        }
    }
  };
  </script>
  
  <style rel="stylesheet/scss" lang="scss">
    .seleDay{
        border-radius: 50%;
        background-color: #266eff;
        color: #fff;
    }
    .l{
        text-align: right;
        height: 60px;
        line-height: 60px;
        color: #afafaf;
        margin-right: 10px;
    }
    .r{
        height: 100%;
        width: 200px;
        border-right: 1px solid #e7ebef;
    }
    .tableCard{
        width: 180px;
        color: #fff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
    }
    .tableBox{
        position: absolute;
        width: 200px;
        display: flex;
        justify-content: center;
        cursor: pointer;
    }
    .cardTitle{
        font-size: 12px;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
    }
    .check{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
  </style>
  